<!DOCTYPE html>
<html>

<head>
    {include file="common/meta" /}

    <style type="text/css">
        /* 全局基础样式重置与设置 */
        body {
            color: #333;
            background-color: transparent;
            background-size: cover;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            min-height: 100vh;
        }

        a {
            color: #444;
            text-decoration: none;
        }

        /* 登录容器整体布局 - 放大模块并增加弧度 */
        .login-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .login-screen {
            width: 100%;
            max-width: 420px; /* 稍微增加宽度以容纳选项卡 */
            margin: 0 auto;
        }

        .well {
            border-radius: 12px; /* 增加圆角弧度 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            background: #fff;
            border: none;
            overflow: hidden;
        }

        /* 响应式适配 */
        @media (max-width: 767px) {
            .login-screen {
                padding: 0 15px;
                max-width: 100%;
            }
        }

        /* 登录表单区域样式 */
        .login-form {
            padding: 35px 25px; /* 调整内边距 */
        }

        /* 隐藏头像相关元素 */
        #profile-img, #profile-name {
            display: none;
        }

        /* 表单元素样式 */
        form {
            margin-top: 20px;
        }

        /* 输入框组样式 */
        .form-group {
            margin-bottom: 22px; /* 增加间距 */
        }

        .input-group {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 8px; /* 输入框增加弧度 */
            overflow: hidden;
            height: 52px; /* 放大输入框高度 */
        }

        .form-control {
            flex: 1;
            border: none;
            padding: 0 18px;
            font-size: 15px; /* 放大字体 */
            outline: none;
            height: 100%;
        }

        /* 验证码、发送验证码按钮样式 */
        .send-sms {
            background-color: #fff;
            border: none;
            color: #f90;
            cursor: pointer;
            padding: 0 18px;
            white-space: nowrap;
            height: 100%;
            font-size: 15px; /* 放大字体 */
        }

        /* 保持登录 checkbox 样式 */
        .checkbox {
            margin-bottom: 25px;
        }
        
        /* 选中状态的复选框样式 - 橙色 */
        .checkbox input[type="checkbox"]:checked + label::before {
            background-color: #f90;
            border-color: #f90;
        }

        .checkbox label {
            cursor: pointer;
            font-size: 14px; /* 放大字体 */
            color: #666;
        }

        /* 登录按钮样式 */
        .btn-login {
            width: 100%;
            background-color: #f90;
            border: none;
            color: #fff;
            padding: 15px;
            font-size: 17px; /* 放大字体 */
            border-radius: 8px; /* 按钮增加弧度 */
            cursor: pointer;
            transition: background-color 0.3s;
            height: 52px; /* 放大按钮高度 */
            margin-top: 12px;
        }

        .btn-login:hover {
            background-color: #e88a00;
        }

        /* 标题样式 - 靠左对齐 */
        .login-title {
            font-size: 26px; /* 放大标题 */
            font-weight: bold;
            margin-bottom: 10px;
            text-align: left;
            color: #333;
        }

        .login-subtitle {
            font-size: 15px; /* 放大副标题 */
            color: #999;
            margin-bottom: 20px;
            text-align: left;
            line-height: 1.5;
        }

        /* 背景图样式 */
        body {
            background-image: url('/assets/img/loginbg.png');
        }

        /* 验证码图片区域调整 */
        .input-group-addon {
            padding: 0;
            border: none;
            cursor: pointer;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .input-group-addon img {
            height: 100%;
            width: auto;
            min-width: 120px; /* 放大验证码图片区域 */
        }
        
        /* 新增样式：登录方式选项卡 */
        .login-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .login-tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            cursor: pointer;
            font-size: 16px;
            color: #999;
            position: relative;
            transition: all 0.3s;
        }
        
        .login-tab.active {
            color: #f90;
            font-weight: bold;
        }
        
        .login-tab.active:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #f90;
            border-radius: 3px;
        }
        
        /* 表单切换动画 */
        .login-form-container {
            position: relative;
            overflow: hidden;
            min-height: 280px;
        }
        
        .form-panel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .form-panel.active {
            opacity: 1;
            transform: translateX(0);
            pointer-events: all;
        }
        
        .error-tip {
            color: #ff4d4f;
            font-size: 13px;
            margin-top: 5px;
            display: none;
        }
        
        .password-toggle {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0 15px;
            color: #999;
        }
    </style>
    <!--@formatter:off-->
    {if $background}
    <style type="text/css">
        body {
            background-image: url('{$background}');
        }
    </style>
    {/if}
    <!--@formatter:on-->
</head>

<body>
<div class="container">
    <div class="login-wrapper">
        <div class="login-screen">
            <div class="well">
                <div class="login-form">
                    <p class="login-title">租房管理</p>
                    <p class="login-subtitle">欢迎登录租房房东后台管理系统</p>
                    
                    <!-- 登录方式选项卡 -->
                    <div class="login-tabs">
                        <div class="login-tab active" data-tab="password">密码登录</div>
                        <div class="login-tab" data-tab="sms">验证码登录</div>
                    </div>
                    
                    <div class="login-form-container">
                        <!-- 密码登录表单 -->
                        <form action="" method="post" id="password-form" class="form-panel active">
                            <div id="errtips" class="hide"></div>
                             {:token()}
                            <input type="hidden" name="type" value="password" />
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="username" placeholder="手机号/用户名" name="username"
                                           autocomplete="off" value="" data-rule="required" />
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <input type="password" class="form-control" id="password" placeholder="密码" name="password"
                                           autocomplete="off" value="" data-rule="required" />
                                    <button type="button" class="password-toggle" id="togglePassword">
                                        👁️
                                    </button>
                                </div>
                            </div>
                            
                             <!--@CaptchaBegin-->
                            {if $Think.config.fastadmin.login_captcha}
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}"
                                           data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length})" autocomplete="off" />
                                    <span class="input-group-addon">
                                    <img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" height="100%"
                                         onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();" />
                                  </span>
                                </div>
                            </div>
                            {/if}
                            <!--@CaptchaEnd-->
                            
                            <div class="form-group checkbox">
                                <label class="inline" for="keeplogin">
                                    <input type="checkbox" name="keeplogin" id="keeplogin" value="1" checked />
                                    保持对话
                                </label>
                                <a href="forget_pwd" style="float: right; color: #f90; font-size: 13px;">忘记密码?</a>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn-login">登 录</button>
                            </div>
                        </form>
                        
                        <!-- 验证码登录表单 -->
                        <form action="" method="post" id="sms-form" class="form-panel">
                            <div id="sms-errtips" class="hide"></div>
                              {:token()}
                            <input type="hidden" name="type" value="code" />
                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="sms-username" placeholder="手机号" name="username"
                                           autocomplete="off" value="" data-rule="required" />
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="sms-code" placeholder="验证码" name="password"
                                           autocomplete="off" value="" data-rule="required" />
                                    <button type="button" class="send-sms" id="send-sms-btn">发送验证码</button>
                                </div>
                                <div class="error-tip" id="sms-error"></div>
                            </div>
                            
                            <div class="form-group checkbox">
                                <label class="inline" for="sms-keeplogin">
                                    <input type="checkbox" name="keeplogin" id="sms-keeplogin" value="1" checked />
                                    保持对话
                                </label>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn-login">登 录</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 登录方式选项卡切换
    document.querySelectorAll('.login-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            const tabType = this.getAttribute('data-tab');
            
            // 切换选项卡激活状态
            document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            
            // 切换表单显示
            document.querySelectorAll('.form-panel').forEach(panel => panel.classList.remove('active'));
            document.getElementById(tabType + '-form').classList.add('active');
        });
    });
    
    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
    
    togglePassword.addEventListener('click', function() {
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            this.textContent = '🔒';
        } else {
            passwordInput.type = 'password';
            this.textContent = '👁️';
        }
    });
    
    // 发送验证码按钮点击事件
    const sendSmsBtn = document.getElementById('send-sms-btn');
    const smsError = document.getElementById('sms-error');
    
    sendSmsBtn.addEventListener('click', function () {
        const phone = document.getElementById('sms-username').value;
        if (!phone) {
            smsError.textContent = '请先输入手机号';
            smsError.style.display = 'block';
            return;
        }

        // 验证手机号格式
        const phoneReg = /^1[3-9]\d{9}$/;
        if (!phoneReg.test(phone)) {
            smsError.textContent = '请输入正确的手机号';
            smsError.style.display = 'block';
            return;
        }

        // 禁用按钮，防止重复点击
        this.disabled = true;
        const originalText = this.textContent;
        this.textContent = '发送中...';

        // 调用发送验证码接口
        fetch('/api/sms/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 如果需要CSRF令牌验证
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
            },
            body: JSON.stringify({
                mobile: phone,
                event: 'adminlogin'
            })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                return response.json();
            })
            .then(data => {
                // 假设接口返回格式：{code: 0, msg: '成功'} 或 {code: 1, msg: '错误信息'}
                if (data.code === 1) {
                    // 发送成功，开始倒计时
                    let countdown = 60;
                    
                    const timer = setInterval(() => {
                        if (countdown <= 0) {
                            clearInterval(timer);
                            sendSmsBtn.textContent = '发送验证码';
                            sendSmsBtn.disabled = false;
                        } else {
                            sendSmsBtn.textContent = `重新发送(${countdown}s)`;
                            countdown--;
                        }
                    }, 1000);

                    // 显示成功提示
                    smsError.textContent = data.msg || '验证码已发送，请注意查收';
                    smsError.style.color = '#52c41a'; // 绿色提示
                    smsError.style.display = 'block';
                    
                    // 3秒后隐藏提示
                    setTimeout(() => {
                        smsError.style.display = 'none';
                    }, 3000);
                } else {
                    // 发送失败
                    throw new Error(data.msg || '发送验证码失败，请稍后重试');
                }
            })
            .catch(error => {
                // 显示错误信息
                smsError.textContent = error.message;
                smsError.style.display = 'block';

                // 恢复按钮状态
                sendSmsBtn.textContent = originalText;
                sendSmsBtn.disabled = false;
                
                // 3秒后隐藏错误提示
                setTimeout(() => {
                    smsError.style.display = 'none';
                }, 3000);
            });
    });
    
    // 表单提交验证
    document.getElementById('password-form').addEventListener('submit', function(e) {
        // 这里可以添加表单验证逻辑
        // 如果验证失败，调用 e.preventDefault() 阻止表单提交
    });
    
    document.getElementById('sms-form').addEventListener('submit', function(e) {
        // 这里可以添加表单验证逻辑
        // 如果验证失败，调用 e.preventDefault() 阻止表单提交
    });
</script>
</body>
</html>